<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
// 声明响应式变量value
const value = ref("");
// 跳转到about页面
const onClickLeft = () => {
history.go(-1);
};
</script>

<template>


<van-sticky >
  <van-search
  v-model="value"
  right-icon="search"
  left-icon=""
  shape="round"
  background="#defccd"
  placeholder="请输入搜索关键词"
  @search="onSearch"
  @click-left-icon="onClickLeft"
  to="sreach"
>
  <template #left>
      <van-icon name="arrow-left"   @click="onClickLeft"/>

  </template>
</van-search>
</van-sticky>

<div style="background-image: url(https://pic.mdcdn.cn/h5/pic/202302/4edafbb35bdb4f0fff5d2c4a566692be.jpg);">
  <van-cell center  style="opacity: 0.5 ;">
  
  <template #title>
    <span class="custom-title" >智慧家空调会员店</span>
    </template>

  <template #label>
    <van-tag type="primary">官方</van-tag>
    <span class="custom-title">店铺粉丝:548</span>
</template>

  <template #value>
    <div background="#00000066">
    <van-button
    color=""
  icon="plus"
  plain hairline round type="small"
  to="login"
>
  订阅
</van-button>
</div></template></van-cell>


<van-notice-bar color="black" background="white" delay
  left-icon="volume-o"
  text="【通知】1.受天气影响，3月2日起黑龙江、山西、哈尔滨、新疆、宁夏、陕西等部分省市区域派送、退换货等服务受限，会出现延迟或停滞；2.受系统、仓库盘点、疫情区域等影响，如您的订单/售后单等出现未及时处理的情况，请您联系店铺在线客服反馈；3.注意防范诈骗，如有疑问请联系官方渠道在线客服咨询。"
  style="opacity: 0.5 ;"/>

<!--轮播图-->


<div style="text-align: center;">
	<van-swipe class="my-swipe" :autoplay="2000000" indicator-color="white">
<van-swipe-item><van-image
width="350"
height="196"
fit="contain"
src="//pic.mdcdn.cn/h5/pic/202303/d5fdf670656b8f9ac53b6fe2073af425.png"
/>

</van-swipe-item>
<van-swipe-item>
</van-swipe-item>
</van-swipe>
</div>
<!---插一张图片-->

<div style="display: flex;margin-top: 10px;">
    <img src="https://pic.mdcdn.cn/h5/pic/202302/2ce8fec00493a217ff5ead491946add5.gif" style="width: 174px;height: 133px;margin-left:14px ;">
    <img src="https://pic.mdcdn.cn/h5/pic/202302/7aa25b6d8e5dbdf9474ec6aff2d94141.gif" style="width: 174px;height: 133px;margin-left:14px ;">
</div>

<!---插一张图片-->
<div style="margin-top: 15px; width: 354px;margin-left: 15px;">
    <van-grid :column-num="4" :border=false icon-size="48">
      <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_297.png?t=2022042901" text="壁挂式空调"  to="meidi"/>
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_301.png?t=2022042901" text="立柜式空调" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_15.png?t=2022042901" text="中央空调" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_34.png?t=2022042901" text="移动空调" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_11.png?t=2022042901" text="COLMO" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_30.png?t=2022042901" text="除湿机" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_26.png?t=2022042901" text="空气能热水器" />
  <van-grid-item icon="//img.mdcdn.cn/h5/img/shop/category/category_18.png?t=20230207" text="配件耗材" />
  
</van-grid>
</div>
<!--导航-->
<div style="text-align: center;font-size: 16.64px;color: #232323; margin-top: 15px;opacity: 0.5 ;">热销商品</div>

    
<van-card class="s-card" >
  <template #tags> 
       
    <van-grid :column-num="2" :center="false" :gutter="10" >

      <van-grid-item  to="info">
	<div><van-tag type="warning">官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
  width="123.99"
  height="123.99"
  src="https://dsdcp.smartmidea.net/mcsp/prod/20221121/1c6aa336967a4b94b747aaf47ca74f77.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【新品】美的 直排式4KG迷你滚筒式烘干机 干衣机 紫外线除菌 "</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥8899</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />	
</div>
</van-grid-item>
      

<van-grid-item  to="info">
	<div><van-tag type="warning">官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
  width="123.99"
  height="123.99"
  src="https://pic.midea.cn/smartpic/pic/106d25d51064167b349329befe.png"
/>
<div style="margin-bottom: 15px;">【Hot】电饭煲 4L容量 高端优雅 18分钟热水快煮 智能预约 立体IH大火加热 </div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥8899</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO精选</van-tag></p>
	</div>
	<van-button  icon="cart-o" round type= "primary" size="small" style="float: right;" />
</div>
</van-grid-item>
  </van-grid>
</template>
</van-card>

</div>
<van-tabbar v-model="active">
<van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
<van-tabbar-item icon="friends-o">场景</van-tabbar-item>
<van-tabbar-item icon="service-o">客服</van-tabbar-item>
</van-tabbar>



<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />


</template>

<style lang="less" scoped>
//底部

</style>
